<template>
  <el-card :shadow="defaultData.cardShadow">
    <view-name></view-name>

    <div class="grid grid-c-4">
      <div>
        {{inputs.number}}
        <div class="tipBox">整数</div>
        <el-input v-model="inputs.number" placeholder="" v-num="['inputs.number', [1, 10]]">
          <template #append>
            v-num="['inputs.number', [1, 10]]"
          </template>
        </el-input>
      </div>
      <div>
        {{inputs.float}}
        <div class="tipBox">小数（默认2位）</div>
        <el-input v-model="inputs.float" placeholder="" v-num:float="['inputs.float']">
          <template #append>
            v-num:float="['inputs.float']"
          </template>
        </el-input>
      </div>
      <div>
        <div class="tipBox">小数（自定义保留n位）</div>
        <el-input
          v-model="inputs.floatLength"
          placeholder=""
          v-num:float.5="['inputs.floatLength']"
        >
          <template #append>
            v-num:float.5="['inputs.floatLength']"
          </template>
        </el-input>
      </div>
      <div>
        <div class="tipBox">整数 || 小数（固定范围）</div>
        <el-input
          v-model="inputs.numberScope"
          placeholder=""
          v-num="['inputs.numberScope', [1, 10]]"
        >
          <template #append>
            v-num="['inputs.numberScope', [1, 10]]"
          </template>
        </el-input>
      </div>
    </div>
  </el-card>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, nextTick } from "vue";
export default defineComponent({
  setup(props, { emit }) {
    return {
      inputs: reactive({
        number: 0,
        float: 0,
        floatLength: 0,
        numberScope: 1,
      }),
    };
  },
});
</script>

<style scoped lang='scss'>
</style>